<template>
  <!-- 主页，负责流程走向 -->
  <div>
    <a-steps progress-dot :current="current">
      <a-step v-for="item in steps" :key="item.title" :title="item.title"  />
    </a-steps>
    <div v-show="steps[current].content === 1 ">
      <First ref="Firstchild"></First>
    </div>
    <div v-show="steps[current].content === 2 ">
      <Second ref="Secondchild"></Second>
    </div>
    <div v-show="steps[current].content === 3 ">
      <Third ref="Thirdchild"></Third>
    </div>
    <div v-show="steps[current].content === 4 ">
      <Fourth ref="Fourthchild"></Fourth>
    </div>

    <div class="steps-action">
      <a-button v-if="current > 0" style="margin-right: 10px; width: 40%;" @click="prev" >
        上一页
      </a-button>
      <a-button v-if="current < steps.length - 1" type="primary" @click="next"
      style="width: 40%;"
      >
        下一页
      </a-button>
      <a-button
        v-if="current == steps.length - 1"
        type="primary"
        @click="Submit"
        style="width: 40%;"
      >
        提交
      </a-button>
      <a-modal
        title="Title"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
      >
        <p>{{ ModalText }}</p>
      </a-modal>
    </div>
  </div>
</template>
<script>
import First from './modules/first.vue'
import Second from './modules/second.vue'
import Third from './modules/third.vue'
import Fourth from './modules/fourth.vue'
export default {
  components: {
    First,
    Second,
    Third,
    Fourth
  },
  data() {
    return {
      ModalText: '提交之后不能返回，您确认填好信息了吗？',
      visible: false,
      confirmLoading: false,
      current: 0,
      steps: [
        {
          title: '个人情况(必填项)',
          content: 1,
        },
        {
          title: '个人情况(选填项)',
          content: 2,
        },
        {
          title: '教育与工作经历',
          content: 3,
        },
        {
          title: '家庭关系与紧急联系人',
          content: 4,
        },
      ],
      first:{
        name:'',//个人姓名
        Idcard:'',//身份证号
        birthday:'',//出生日期
        email:'',//电子邮箱
        phone:'',//个人手机号
        sex:'',//性别
        nativePlace:''//籍贯
      },
      second:{
        address:'',//家庭住址
        educationalBackground:'',//学历
        emergencyContactName:'',//紧急联系人姓名
        emergencyContactPhone:'',//紧急联系人电话
        isLeaveOffice:'',//是否办理离职手续
        isNDA:'',//与原单位是否有保密协议
        isrelation:'',//在本公司是否有亲戚
        linkPlace:'',//通信地址
        school:'',//毕业学校
        subject:'',//专业
        relationName:'',//亲戚姓名
        relationShip:'',//与亲戚的关系
        departmentPosition:'',//亲戚所在部门及职务
        haveNDA:'',//保密协议
        nonCompete:''//竞业限制

      },
      third:{
        appellation:{},//近家属称谓
        duties:{},//之前工作单位的职务
        familyName:{},//近家属人姓名
        familyPhone:{},//近家属人的联系电话
        familyWork:{},//近家属人的工作单位或职务
        mainProducts:{},//主营产品
        range:{},//工作经历时间段
        unitName:{},//单位名称
        witness:{}//之前单位的证明人及其电话号码

      },
      fourth:{

      },
      alldata:{

      }



    }
  },
  methods: {
    next(e) {
      switch(this.current){
        case 0:
          this.$refs.Firstchild.handleSubmit(e)
          this.first = this.$refs["Firstchild"].firstvalues
          console.log('第一页数据为：',this.first)
          if(this.first.passby == 1 ){
            this.current++;
          }
          break
        case 1:
          this.$refs.Secondchild.handleSubmit(e)
          this.second = this.$refs["Secondchild"].secondvalues
          console.log('第二页的数据为：',this.second)
          if(this.second.secondpassby == 1){
            this.current++;
          }
          break
        case 2:
          this.$refs.Thirdchild.handleSubmit(e)
          this.third = this.$refs["Thirdchild"].thirdvalues
          console.log('第三页的数据为：',this.third)
          if(this.third.thirdpassby == 1){
            this.current++;
          }
      }

      // if(this.current == 0){
        // this.$refs.child.handleSubmit(e)
        // this.first = this.$refs["child"].firstvalues
        // console.log('第一页数据为：',this.first)
        // if(this.first.passby == 1 ){
        //   this.current++;
        // }
      // }
      // if(this.current == 1){
      //   this.current++;
      // }   
    },
    handleOk(e) {
      this.ModalText = '数据正在提交，请稍后';
      this.confirmLoading = true;
      this.$refs.Fourthchild.handleSubmit(e)
      this.fourth = this.$refs["Fourthchild"].fourthvalues
      console.log('第一页的数据为：',this.first)
      console.log('第二页的数据为：',this.second)
      console.log('第三页的数据为：',this.third)
      console.log('第四页的数据为：',this.fourth)
      
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
        this.$router.push({path:"/recruitmentFileManagement/Submit"})
      }, 2000);
    },
    handleCancel(e) {
      console.log('Clicked cancel button');
      this.visible = false;
    },
    Submit(e) {
      this.visible = true;
      },
    prev() {
      switch(this.current){
        case 1:
          this.first.passby = 0
          this.current--;
          break;
        case 2:
        this.second.secondpassby = 0
          this.current--;
          break;
        case 3:
          this.third.thirdpassby = 0
          this.current--;
          break;
      }
      // if(this.current == 2){
      //   this.first.passby = 0
      //   this.current--;
      // }
      // if(this.current == 3){
      //   this.current--;
      // }
      
    },
  },
};
</script>
<style scoped>
.steps-action {
  margin-top: 24px;
  text-align: center;
}
</style>